<template>
  <div>
    <div class="cards">
      <Card style="width: 320px" class="card-item" v-for="item in orderArr" :key="item.id">
        <div style="text-align: center">
          <span>{{ item.status }}</span>
          <img src="../assets/cy.jpg" />
          <div class="sTime">
            <p>开始时间：</p>
            <h3>{{ item.start_time }}</h3>
          </div>
          <div class="eTime">
            <p>结束时间：</p>
            <h3>{{ item.end_time }}</h3>
          </div>


          <!-- <div class="btns">
            <Button type="primary" @click="getUse(item)">用车</Button>
            <Button type="primary" @click="returnIt(item)">还车</Button>
          </div> -->
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import { getOrdersInfo } from '../api/index'
const userInfo = JSON.parse(localStorage.getItem('userInfo') || {})
export default {
  data() {
    return {
      orderArr: []
    }
  },
  methods: {
    getOrders() {
      const { id } = userInfo
      getOrdersInfo({ user_id: id }).then((res) => {
        console.log(res)
        this.orderArr = res
      })
    }
  },
  created() {
    this.getOrders()
  }
}
</script>

<style scoped lang="scss">
img {
  width: 200px;
}
.cards {
  width: 100%;
  display: grid;
  //   grid-template-columns: repeat(3, 33.33%);
  grid-template-columns: repeat(auto-fill, 400px);
  //   grid-template-rows: repeat(3, 33.33%);
  row-gap: 10px;
  padding-left: 100px;
  .card-item {
    position: relative;
    span {
      position: absolute;
      color: rgb(35, 35, 31);
      font-weight: bold;
      left: 20px;
    }
  }
  .sTime,.eTime{
    display: flex;
  }
}
.btns {
  display: flex;
  justify-content: flex-end;
  button {
    margin: 0 5px;
    margin-top: 10px;
  }
}
</style>
